<template>
  <div class="container">
    <div class="wrapper">
      <div class="left">
        <img :src="LoginBanner" height="380" />
      </div>

      <div class="right">
        <h5 class="brand">
          <img src="@/assets/logo.svg" width="45" />
          {{ title }}
        </h5>
        <n-form class="form-wrapper">
          <n-input v-model:value="form.username" size="large" placeholder="请输入用户名">
            <template #prefix>
              <n-icon :component="User" />
            </template>
          </n-input>
          <n-input
            v-model:value="form.password"
            type="password"
            size="large"
            placeholder="请输入密码"
            style="margin: 30px 0"
          >
            <template #prefix>
              <n-icon :component="Locked" />
            </template>
          </n-input>
          <n-button size="large" color="#316C72FF" @click="handleLoginOnClick">登录</n-button>
        </n-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { User, Locked } from '@vicons/carbon'
import LoginBanner from '/assets/login_banner.png'

const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
const form = reactive({} as BaseUserPO)

const handleLoginOnClick = () => {
  userStore.Login(form.username, form.password)
}
</script>
<style scoped>
.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(@/assets/login_bg.jpg);
  background-size: 100%;

  .wrapper {
    width: 1000px;
    box-shadow: 1.5px 3.99px 27px 0px rgb(0 0 0 / 10%);
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;

    .left {
      padding: 40px;
      border-right: 1px solid #cccccc5e;
    }

    .right {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .brand {
        width: 100%;
        padding: 15px;
        color: #6a6a6a;
        font-size: 24px;
        font-weight: normal;
        text-align: center;

        display: flex;
        align-items: center;
        justify-content: center;

        img {
          margin-right: 25px;
        }
      }

      .form-wrapper {
        width: 360px;
      }

      button {
        width: 100%;
      }
    }
  }
}
</style>
